<template>
  <div>
    <div class="liveMoreTitle">
        <div class="title-wrap" v-show="!search">
           <div class="toBack" @click="toHome"   v-if="isHeaderBackBtn">
             <Iconfont iconClass="right" />
           </div>

           <div>精彩视频</div>
           <Iconfont iconClass="sousuo begin-search"  @click.native="searchTrue"  />
        </div>
        <div  v-if="isSearch" class="search-wrap" :class="search ? 'searchShow' : '' " >
            <form  @submit.prevent action="#">
              <input type="search" placeholder="请输入搜索关键字" v-model="searchKeyword"  @keyup.13="handelSearch" ref="inputSearch">
            </form>
            <Iconfont iconClass="sousuo "/>
            <div class="cancel" @click="searchFalse" >取消</div>
        </div>
    </div>
     <div class="liveMoreTab" v-if="this.$channel!='zgjsyh'" >
      <ul>
      	<li v-for="(v,index) of tabsParam" :class="{activeLiveMore:index == nowIndex}" @click="clickTabsParam(index)">{{v.value}}</li>
      </ul>
     </div>
    <div class="nav-scroll-list-wrap liveTab "v-if="vedioTabShowDd">
      <cube-scroll ref="navScroll" direction="horizontal" :class="longNav ? '':'navBlock' ">
        <cube-tab-bar class="nav-wrapper"  v-model="selectedLabel" show-slider @click="clickHandler">
          <cube-tab v-for="(item, index) in navTxts" :label="item.title" :key="item.id"></cube-tab>
        </cube-tab-bar>
      </cube-scroll>
    </div>

    <cube-tab-panels v-model="selectedLabel">
      <cube-tab-panel
        v-for="(item, index) in navTxts"
        :label="item.title"
        :key="item.id"
        ref="myref"
      >
        <div :class="vedioTabShowDd ? 'center-room-wrap':'center-room-wrap-none' "
          >
          <cube-scroll
            :data="navTxts[index].videoItem"
            ref="scroll"
            :options="scrollOptions"
            :scroll-events="['scroll']"
            @scroll="onScrollHandle"
            @pulling-up="onPullingUp(index)"
          >

            <ul class="h-great-list">
              <li
                v-for="v in item.videoItem"
                @click="clickLookBack(v.id)"
                :key="v.id"
              >
                <img
                  :src="v.imagUrl"
                  @load="onImgLoad(index)"
                >
                <p>{{v.title}}</p>
              </li>
            </ul>
            <template
              slot="pulldown"
              slot-scope="props"
            >
              <div
                v-if="props.pullDownRefresh"
                class="cube-pulldown-wrapper"
                :style="pullDownStyle"
              >
                <div class="pulldown-content">
                  <span v-if="props.beforePullDown">{{ pullDownTip }}</span>
                  <template v-else>
                    <span v-if="props.isPullingDown">正在更新...</span>
                    <span v-else>更新成功</span>
                  </template>
                </div>
              </div>
            </template>
          </cube-scroll>

        </div>


      </cube-tab-panel>
    </cube-tab-panels>
     <div class="mask" v-show="maskShow" @touchmove.prevent>
    </div>
  </div>
</template>

<script>
import { findIndex } from "../util/util";
export default {
  data() {
    return {
      SysOrgInfo: {},
      navTxts: [
        {
          id: "",
          title: "全部",
          videoItem: [],
          totalPage: true,
          nowPageNum:1,
          isSearch:false,//头部输入框
        }
      ],
      selectedLabel: "全部",
      disabled: false,
      vedioTabShowDd: false,
      nowPageNum: 1,
      totalPage: true,
      isHeaderBackBtn:false,//顶部返回按钮显示不显示
      checkType: "",
      secondStop: 26,
      scrollOptions: {
        pullDownRefresh: false,
        pullUpLoad: {
          threshold: 10,
          txt: {
            more: "加载更多",
            noMore: "没有更多数据"
          }
        },
        scrollbar: true
        // directionLockThreshold: 0
      },
      pullDownY: 0,
      pullDownStyle: "",
      opacityStyle: "",
      triggerSurprise: false,
      longNav: false,
      search:false,
      maskShow:false,
      nowIndex:'',
      sel:"",
      searchKeyword:'',
       tabsParam:[
        {
          value:'最新视频',
          type:''
        },
        {
          value:'最热视频',
          type:'pv'
        }
      ],
    };
  },
  created() {
  	//console.log( this.$route.query.tabNum)
  	if(this.$channel=='gszq'||this.$channel=='xsdzq'){
  		this.isHeaderBackBtn  = false;
  	}else{
  		this.isHeaderBackBtn  = true;
  	}
  	if(this.$route.query.tabNum == '0'){
  		this.nowIndex = 0
  		this.sel = ''
  	}else{
  		this.nowIndex = 1
  		this.sel = 'pv'
  	}
    this.search= false
    this.maskShow=false
    this.searchKeyword=''
    this.getHomeMoreType();
    this.dotNum();
    this.getAllData();
    // 跳转页面去第二页  第二页很长的时候 恢复顶部位置 ios10已测试通过
    window.scrollTo(0, 0);
    this.$store.dispatch("hideNav");
  },
  activated:function() {//页面缓存了
    this.$store.dispatch("hideNav");
  },
  beforeRouteLeave(to, from, next) {
        // 只有去详情页的时候 设置要缓存
        if(to.path.indexOf("lookBack_particulars") != -1 ){
          from.meta.keepAlive = true;
        } else{
          from.meta.keepAlive = false;
        }
        next();
  },
  methods: {
  	      dotNum(){//统计
				let _this = this;
				var argumentData = {
					sessionId: "liveMore_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource:fun.getPlatform(),//微信 app
					url:window.location.href,//当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);

        if(this.$channel=== 'gyzq'){
          if(this.$store.state.gyzqIsApp){
					  TalkingData.onPage("p_zbsyjcspmore_01")
					}else{
						TDAPP.onCustomPage("p_zbsyjcspmoreh5_01","精彩视频更多页面");
            
					}  
        }

			},
  	clickTabsParam(index){
  		//console.log(index)
  		this.nowIndex = index
  		if(index == '0'){
  			this.sel = ''
  			this.getBackToSeeArr(this.checkType,this.sel);
  		}else{
  			this.sel = 'pv'
  			this.getBackToSeeArr(this.checkType,this.sel);
  		}
  	},
    clickHandler(key) {
      this.checkType = this.navTxts.find(obj => obj.title === key).id;
      this.getBackToSeeArr(this.checkType,this.sel);
    },
    changeHandler(key) {},
    scroll(pos) {},
    //获取精彩视频列表
    getBackToSeeArr(type,sel) {
      //i是navTxts的索引
      //type 是后台需要的参数 即分类按钮的id
      let i = this.navTxts.findIndex(obj => obj.id === type); //获取index
      this.$http
        .get("/h5live/getHomeVideo", {
          params: {
            p: "1",
            type,
            sel
          }
        })
        .then(
          res => {
            if (res.data.code == "000000") {
              this.$set(this.navTxts[i], "videoItem", res.data.data);
              this.$set(this.navTxts[i], "totalPage", true);
              this.$set(this.navTxts[i], "nowPageNum", "1");
            } else {
              console.log(err);
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    //初始化数据
    getAllData(){
      this.$http
        .get("/h5live/getHomeVideo", {
          params: {
            p: "1",
            type:'',
            sel:this.sel
          }
        })
        .then(
          res => {
            if (res.data.code == "000000" && res.data.data) {
              this.$set(this.navTxts[0], "videoItem", res.data.data);
              //console.log(this.navTxts)
            } else {
              console.log(err);
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    //获取tab标题
    getHomeMoreType() {
      this.$http.get("/h5live/getHomeVideoType").then(
        res => {
          if (res.data.code == "000000") {
           this.navTxts = this.navTxts.concat(res.data.data);
            if (this.navTxts.length > 2) {
              this.vedioTabShowDd = true;
            } else {
              this.vedioTabShowDd = false;
            }

            if (this.navTxts.length > 4) {
              this.longNav = true;
            } else {
              this.longNav = false;
            }
          } else {
          }
        },
        err => {}
      );
    },
    onPullingDown(index) {
      this.getNewData(this.checkType, "down", index,this.sel);
    },
    onPullingUp(index) {
      if (this.navTxts[index].totalPage) {
        // 如果有新数据
        this.navTxts[index].nowPageNum++;
        this.getNewData(this.checkType, "up", index,this.sel);
      } else {
        // 如果没有新数据

        this.$refs.scroll[index].forceUpdate();
      }

    },
    onImgLoad(index) {
      this.$refs.scroll[index].refresh();
    },
    //获取新数据
    getNewData(type, pilling, index,sel) {
      let i;
      let p;
      if (type === "") {
        i = 0;
      } else {
        i = this.navTxts.findIndex(obj => obj.id === type); //获取tab下的索引
      }

      if (pilling === "down") {
        p = "1";
      } else {
        p = this.navTxts[index].nowPageNum;
      }

      this.$http
        .get("/h5live/getHomeVideo", {
          params: {
            p,
            type,
            sel
          }
        })
        .then(
          res => {
            if (res.data.code == "000000") {
              // this.navTxts[index].videoItem.concat(res.data.data)
              //  this.$set(this.navTxts[index], "videoItem", newPage);
              if (pilling === "up") {
                this.navTxts[i].videoItem = this.navTxts[
                  index
                ].videoItem.concat(res.data.data);
              } else {
                this.$set(this.navTxts[i], "videoItem", res.data.data);
                // console.log(this.navTxts);
                this.$refs.scroll[index].forceUpdate();
                this.navTxts[i].totalPage = true;
                this.navTxts[i].nowPageNum = 1;
              }

              if (res.data.data.length === 0) {
                this.navTxts[i].totalPage = false;
              }
            } else {
              console.log(err);
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    //跳转回看详情页面
    clickLookBack(id) {
      this.$router.push({
        path: `/${this.$channel}/lookBack_particulars/${id}`
      });
    },
    onScrollHandle(pos) {
      this.pullDownY = pos.y;
      if (pos.y > 0) {
        this.pullDownStyle = `top:${pos.y}px`;
      }
    },
    //回到首页
    toHome(){
     this.$router.push(`/${this.$channel}/home`);
    },
    //点击搜索图标
    searchTrue(){
       let _this = this;
      _this.search= true
      _this.isSearch = true
      _this.maskShow=true
      _this.searchKeyword=''
      setTimeout(function(){//不加延迟 控制台报错 报错'focus' of undefined
     	    _this.$refs.inputSearch.focus();
     	},100)
    },
    searchFalse(){
      this.search= false
      this.maskShow=false
      this.searchKeyword=''
    },
    //开始搜索
    handelSearch(){
      this.maskShow=false
      this.$refs.inputSearch.blur();
      this.$router.push({
        path: `/${this.$channel}/liveMoreSearch`,
        query: {
          content: this.searchKeyword,
          type: this.checkType
        }
      })

    }
  },
  computed: {
    pullDownTip() {
      if (this.pullDownY <= 60) {
        return "下拉刷新...";
      }
    }
  }
};
</script>

<style >
.activeLiveMore::before{
  content: '';
  width: 36px;
  height: 4px;
  position: absolute;
  top: 76px;
  left:50%;
  transform: translateX(-50%);
  background: #FF3B30;
}
.activeLiveMore{
	color: #F35757 !important;
}
	.liveMoreTab{
		width: 100%;
		height:80px;
		/*background: pink;*/
		line-height: 80px;
	}
	.liveMoreTab ul{
		display: flex;
		justify-content: space-around;
	}
	.liveMoreTab ul li{
		font-size:32px ;
		color: #333333;
		position: relative;
	}
.nav-scroll-list-wrap {
  transform: rotate(0deg);
  position: relative;
  background-color: white;
  padding-right: 30px;
  padding-left: 10px;
}

.navBlock .cube-scroll-content {
  display: block;
}
.cube-scroll-content {
  display: inline-block;
}

.nav-wrapper {
  display: inline-block;
  white-space: nowrap;
  line-height: 36px;
  padding: 0 20px;
  font-size: 32px;
}

.nav-item {
  display: inline-block;
  padding: 28px 20px;
}

.liveTab .cube-tab {
  display: inline-block;
  padding: 28px 20px;
}

.liveTab .cube-tab div {
  font-weight: 500;
}

.liveTab .cube-tab-bar-slider {
/*  left: 20px;*/
  background-color: #ff0000;
}

.cube-tab_active {
  color: #ff0000;
  /* font-weight: bold; */
}

.liveTab .cube-tab_active div {
  font-weight: bold;
  color: #ff0000;
}

.center-room-wrap {
  height: calc(100vh - 260px);
  transform: rotate(0deg);
  overflow: hidden;
}

.center-room-wrap-none {
  height:calc(100vh - 200px);
  transform: rotate(0deg);
  overflow: hidden;
}

.cube-scroll-wrapper{
  min-height:calc(100%+1px);
  z-index:1;
}

.cube-scroll-list-wrapper {
  min-height: 0;
}

.h-great-list {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100%;
  padding: 0 30px;
  font-size: 0;
  padding-bottom: 10px;
}

.h-great-list li {
  width: 330px;
  margin-top: 22px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
  background: rgba(255, 255, 255, 1);
  /*box-shadow: 0px 2px 8px 2px rgba(8, 9, 6, 0.1);
  border-radius: 10px;*/
}

.h-great-list li:nth-child(even) {
  margin-left: 30px;
}

.h-great-list li img {
  width: 100%;
  height: 187px;
  border-radius: 12px;
}


.h-great-list li p {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  line-height: 40px;
 vertical-align: middle;
  font-size: 26px;
 text-align: justify;
  color: #333333;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.video-start {
  width: 66px;
  height: 66px;
  background: pink;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-left: -32px;
  background: url(/static/img/icon2.6fa8c0b.png) no-repeat;
  background-size: 150px 288px;
  background-position: 0px -106px;
}

.h-great-list-info {
  padding: 0 10px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-flex-align-items: center;
}

.h-great-list-info i {
  font-size: 42px;
}

.h-great-list-info span {
  color: #000;
  font-size: 26px;
  height: 42px;
  line-height: 38px;
}
.cube-pulldown-wrapper {
  transform: translateY(-100%);
  line-height: 0;
}

.cube-pulldown-wrapper .pulldown-content {
  width: 100%;
}
.cube-pulldown-wrapper .pulldown-content span {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  text-align: center;
  color: #333;
  font-size: 14px;
}

.pulldown-content span {
  font-size: 28px !important;
}
.more-b-title{
  margin-top: 20px;
}

.liveMoreTitle {
  font-size: 34px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  margin: 15px 0;
  display: block;
  position: relative;
}
.liveMoreTitle .toBack{
 margin-right: 35px;
 display: inline-block;
 position: absolute;
 left: 10px;
}
.liveMoreTitle .toBack i{
 font-size: 34px;
 color: #000;
 padding: 10px;
}

.search-wrap{
  display: flex;
  padding-left: 20px;
  align-items:center;
  opacity: 0;
}

.search-wrap.searchShow{
  opacity: 1;
}
.search-wrap i{
  position: absolute;
  left:50px;
  font-size: 30px;
  color: #666;
  top:2px;
}
.search-wrap input{
  width: 620px;
  height: 60px;
  background:rgba(246,246,246,1);
  border-radius:30px;
  background: #F6F6F6;
  box-sizing: border-box;
  padding-left: 80px;
  font-size: 30px;
}
.search-wrap .cancel{
  margin-left: 30px;
  font-size: 28px;
  color: #333;
}

.mask{
  width: 100vw;
  height: calc(100vh - 90px);
  position: fixed;
  top:90px;
  background:rgba(0,0,0,1);
  opacity:0.4;
  z-index: 10;
}

.begin-search{
  font-size: 40px;
  position: absolute;
  right: 40px;
  top: 0px;
}
/*清除谷歌浏览器下的 search 叉号 */
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/*清除IE下的 search 叉号 */
input[type=search]::-ms-clear {
display: none;
}
</style>
